<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/login.css">
    
</head>
<body>
    <div class="nav">
        <img src="../img/logo.jpg" alt="">
        <span>我的博客系统</span>
        <span class="space"></span>
        <a href="#" class="home-link">主页</a>
        <a href="#" class="write-blog-link">写博客</a>
        <a href="https://www.baidu.com/">注销</a>
    </div>
    <div class="login_container">
        <!-- 这是登录页面 -->
        <div class="login_dialog">
            <h3>登录</h3>
            <div class="row">
                <span>用户名</span>
                <input class="username" type="text" name="" id="">
            </div>
            <div class="row">
                <span>密码</span>
                <input class="password" type="password" name="" id="">
            </div>
            <div class="row">
                <button id="submit">提交</button>
            </div>
                <div id="errorMsg" class="error-message"></div>
        </div>
    </div>
    <script>
        // 获取DOM元素
        const submit = document.getElementById('submit');
        const usernameInput = document.querySelector('.username');
        const passwordInput = document.querySelector('.password');
        const errorMsg = document.getElementById('errorMsg');
        const homeLink = document.querySelector('.home-link');
        const writeBlogLink = document.querySelector('.write-blog-link');

        // 绑定登录按钮点击事件
        submit.addEventListener('click', function() {
            const username = usernameInput.value.trim();
            const password = passwordInput.value.trim();

            // 验证账号密码
            if (username === '123' && password === '123') {
                // 验证通过，跳转到博客列表页
                window.location.href = 'blog_list.html';
            } else {
                // 验证失败，显示错误信息
                errorMsg.textContent = '用户名或密码错误';
                errorMsg.style.color = 'red';
            }
        });

        // 为密码输入框添加回车键触发登录
        passwordInput.addEventListener('keyup', function(event) {
            if (event.key === 'Enter') {
                submit.click();
            }
        });

        // 为“主页”和“写博客”链接添加点击事件
        homeLink.addEventListener('click', function(event) {
            event.preventDefault();
            alert('请登录');
        });

        writeBlogLink.addEventListener('click', function(event) {
            event.preventDefault();
            alert('请登录');
        });
    </script>
</body>
</html>